<template>
  <el-form
    ref="dispatchFormRef"
    :model="dispatchForm"
    :rules="dispatchRule"
    label-width="120px"
    status-icon
  >
    <el-row style="display: inline-flex">
      <el-form-item label="生效时间：" prop="effectTime">
        <el-date-picker
          v-model="dispatchForm.effectTime"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="开始时间"
        />
      </el-form-item>
      <el-form-item label="至" label-width="35px" prop="invalidTime">
        <el-date-picker
          v-model="dispatchForm.invalidTime"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="结束时间"
        />
      </el-form-item>
    </el-row>

    <el-form-item label="状态：" prop="scheduleStatus">
      <el-switch
        v-model="dispatchForm.scheduleStatus"
        inline-prompt
        active-text="开"
        inactive-text="关"
        :active-value="0"
        :inactive-value="1"
      />
    </el-form-item>
    <el-form-item label="类型：" prop="scheduleType">
      <el-radio-group v-model="dispatchForm.scheduleType">
        <el-radio :label="0">周期</el-radio>
        <el-radio :label="1">单次</el-radio>
      </el-radio-group>
    </el-form-item>

    <template v-if="dispatchForm.scheduleType === 0">
      <el-form-item label="周期：" prop="scheduleCycle">
        <el-radio-group v-model="dispatchForm.scheduleCycle">
          <el-radio :label="1">月</el-radio>
          <el-radio :label="2">周</el-radio>
          <el-radio :label="3">天</el-radio>
          <el-radio :label="4">时</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        v-if="dispatchForm.scheduleCycle === 2"
        label="指定日期："
        prop="appointWeekdays"
      >
        <el-select
          v-model="dispatchForm.appointWeekdays"
          multiple
          placeholder="日期"
        >
          <el-option
            v-for="item in weekOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        v-if="dispatchForm.scheduleCycle === 1"
        label="指定日期："
        prop="appointDays"
      >
        <el-select
          v-model="dispatchForm.appointDays"
          multiple
          placeholder="日期"
        >
          <el-option
            v-for="item in dayOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        v-if="dispatchForm.scheduleCycle !== 4"
        label="指定小时："
        prop="scheduleHour"
      >
        <el-select
          v-model="dispatchForm.scheduleHour"
          clearable
          placeholder="小时"
        >
          <el-option
            v-for="item in hourOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="dispatchForm.scheduleCycle !== 4"
        label="指定分钟："
        prop="scheduleMinute"
      >
        <el-select
          v-model="dispatchForm.scheduleMinute"
          clearable
          placeholder="分钟"
        >
          <el-option
            v-for="item in minuteOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        v-if="dispatchForm.scheduleCycle === 4"
        label="时间间隔："
        prop="interval"
      >
        <el-input-number
          v-model="dispatchForm.interval"
          class="mx-4"
          :min="0"
          :max="23"
          controls-position="right"
        />
      </el-form-item>
    </template>
    <template v-if="dispatchForm.scheduleType === 1">
      <el-form-item label="调度时间：" prop="excuteTime">
        <el-date-picker
          v-model="dispatchForm.excuteTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="请选择调度时间"
        />
      </el-form-item>
    </template>
  </el-form>
</template>
<script>
const weekWords = ["一", "二", "三", "四", "五", "六", "日"];
export default {
  name: "ScheduleTask",
  props: {
    configInfo: {
      type: Object,
      default: () => {},
    },
    activeName: {
      type: String,
      default: "",
    },
  },
  watch: {
    configInfo: {
      handler(val, oldVal) {
        if (val && typeof val === "object") {
          Object.assign(this.dispatchForm, val);
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      dispatchForm: {
        effectTime: "",
        invalidTime: "",
        scheduleStatus: 0,
        scheduleType: 0,
        scheduleCycle: 1,
        appointWeekdays: ["1"],
        appointDays: ["1"],
        scheduleHour: "0",
        scheduleMinute: "0",
        interval: 0,
        excuteTime: "",
      },
      dispatchRule: {
        effectTime: [
          { required: true, message: "开始时间不能为空", trigger: "blur" },
        ],
      },
      weekOptions: new Array(7).fill(1).map((i, idx) => {
        return {
          label: `星期${weekWords[idx]}`,
          value: `${idx + 1}`,
        };
      }),
      dayOptions: new Array(31).fill(1).map((i, idx) => {
        return {
          label: `${idx + 1}`,
          value: `${idx + 1}`,
        };
      }),
      hourOptions: new Array(24).fill(1).map((i, idx) => {
        return {
          label: `${idx}`,
          value: `${idx}`,
        };
      }),
      minuteOptions: new Array(60).fill(1).map((i, idx) => {
        return {
          label: `${idx}`,
          value: `${idx}`,
        };
      }),
    };
  },
  methods: {
    // 用于父组件收集数据
    getData() {
      return new Promise((resolve, reject) => {
        // 仅在填写定时任务时监测是否填写完整
        if (this.activeName == "scheduleTask") {
          this.$refs.dispatchFormRef.validate((valid) => {
            if (valid) {
              resolve({ taskSchedule: this.dispatchForm });
            } else {
              this.$message.warning("【定时任务】开始时间不能为空");
              reject(false);
            }
          });
        } else {
          resolve({ taskSchedule: this.dispatchForm });
        }
      });
    },
  },
};
</script>
<style scoped></style>
